<template>
    <div class="goods-list"> 
        <router-link class="goods-item" to="/home/goodsinfo" tag="div">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/77bfd346ad97807237beca297cfe2fba.png" alt="">    
        <div class="title">小米10</div>
        <div class="info">
            <p class="price">
                <span class="now">$877</span>
                <span class="old">$877</span>
            </p>
            <p class="sell">
                <span>热卖中</span>
                <span>剩余60件</span>
            </p>
        </div>
      </router-link>
       <div class="goods-item">
            <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/92f8142c04dafd2af3d6b0418ed6d209.jpg" alt="">    
        <div class="title">小米10</div>
        <div class="info">
            <p class="price">
                <span class="now">$877</span>
                <span class="old">$877</span>
            </p>
            <p class="sell">
                <span>热卖中</span>
                <span>剩余60件</span>
            </p>
        </div>
    </div>
       <div class="goods-item">
            <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/f86382973dcd3ad509a2787f68e90136.jpeg" alt="">    
        <div class="title">小米10</div>
        <div class="info">
            <p class="price">
                <span class="now">$877</span>
                <span class="old">$877</span>
            </p>
            <p class="sell">
                <span>热卖中</span>
                <span>剩余60件</span>
            </p>
        </div>
    </div>
     <div class="goods-item">
            <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/e353179a4e5b9fd11345a995e1bfe4fb.jpg" alt="">    
        <div class="title">小米10</div>
        <div class="info">
            <p class="price">
                <span class="now">$877</span>
                <span class="old">$877</span>
            </p>
            <p class="sell">
                <span>热卖中</span>
                <span>剩余60件</span>
            </p>
        </div>
    </div>
     <div class="goods-item">
            <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/e353179a4e5b9fd11345a995e1bfe4fb.jpg" alt="">    
        <div class="title">小米10</div>
        <div class="info">
            <p class="price">
                <span class="now">$877</span>
                <span class="old">$877</span>
            </p>
            <p class="sell">
                <span>热卖中</span>
                <span>剩余60件</span>
            </p>
        </div>
    </div>
     <div class="goods-item">
            <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/5c9dbef37151023f137071be95ea929a.jpg" alt="">    
        <div class="title">小米10</div>
        <div class="info">
            <p class="price">
                <span class="now">$877</span>
                <span class="old">$877</span>
            </p>
            <p class="sell">
                <span>热卖中</span>
                <span>剩余60件</span>
            </p>
        </div>
    </div>
     <div class="goods-item">
            <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/e353179a4e5b9fd11345a995e1bfe4fb.jpg" alt="">    
        <div class="title">小米10</div>
        <div class="info">
            <p class="price">
                <span class="now">$877</span>
                <span class="old">$877</span>
            </p>
            <p class="sell">
                <span>热卖中</span>
                <span>剩余60件</span>
            </p>
        </div>
    </div>
     <div class="goods-item">
            <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/e353179a4e5b9fd11345a995e1bfe4fb.jpg" alt="">    
        <div class="title">小米10</div>
        <div class="info">
            <p class="price">
                <span class="now">$877</span>
                <span class="old">$877</span>
            </p>
            <p class="sell">
                <span>热卖中</span>
                <span>剩余60件</span>
            </p>
        </div>
    </div>
     <div class="goods-item">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/77bfd346ad97807237beca297cfe2fba.png" alt="">    
        <div class="title">小米10</div>
        <div class="info">
            <p class="price">
                <span class="now">$877</span>
                <span class="old">$877</span>
            </p>
            <p class="sell">
                <span>热卖中</span>
                <span>剩余60件</span>
            </p>
           
         </div>
       
    </div>
     <mt-button type="danger" size="large">加载更多</mt-button>
 </div>
</template>

<script>
export default {
    //data  是往自己组建内部，挂载一些数据的
    data(){
        return {
            pageindex:1,//分页的页数
            goodslist:[]  //存放商品列表的数组
        }
    },
    created(){
        // this.getGoodsList()
    },
    methods:{
        //获取商品列表
        getGoodsList(){
            this.$http.get('api/getgoods?pageindex='+ this.pageindex)
            .then(result =>{
                if(result.body.status === 0){
                //    this.goodslist = result.body.message;
                   this.goodslist = this.goodslist.concat(result.body.message)  //拼接数据
                }
            })
        }
    }
}
</script>
<style lang="stylus" scoped>
.goods-list{
    display:flex;
    flex-wrap:wrap;
    padding:7px;
    justify-content:space-between;

 .goods-item{
    width:49%;
    border:1px solid #ccc;
    box-shadow:0 0 8px #ccc;
    margin:4px 0;
    padding:2px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:293px;
    img{
        width 100%;
    }
    .title{
        font-size:14px;
    }
    .info{
        background-color #eee;
        p{
            margin:0;
            padding:0;
        }
        .price{
            .now{
                color:red;
                font-weight:bold;
                font-size:16px;
            }
            .old{
                text-decoration:line-through;
                font-size:12px;
                margin-left:10px;
            }
        }
        .sell{
            display:flex;
            justify-content:space-between;
            font-size:13px;
        }
    }
}
}

</style>
